{{setTitle     "响应式的网格"}}
{{setSubTitle  "一个完全可定制的响应式网格"}}
{{setActiveNav "grids"}}

{{> header}}

<div class="content">

    <h2 class="content-subhead">怎么使用Pure的网格？</h2>
    <p>
        Pure的Grids非常容易使用。代码<code>pure-g</code>可以表示一行或者一个网格（grid，g来源于此），而{{code "pure-u-*-*"}}表示列或者单元格（unit，u来源于此）。每个{{code "pure-g"}}能够包含许多单元格。单元格可以通过一个变化的类名来表示它所占用的宽度。举个例子，{{code "pure-u-1-2"}}表示宽度为50%，{{code "pure-u-1-5"}}表示宽度为20%。
    </p>

    <p>
        注意，Pure的所有单元格（unit）必须被网格（grid）包含。直接点说，如果有一个元素的类名为{{code "pure-u-*"}}，那么它的父元素的类名要求必须是{{code "pure-g"}}或者是{{code "pure-g-r"}}（关于pure-g-r，请见下文）。这里有一个例子，把一个网格分成三列：
    </p>

  {{#code}}
    {{> grids/intro}}
  {{/code}}

    <aside>
        <p>
            需要更详细的使用说明，请在YUI的网站上查看<a href="http://yuilibrary.com/yui/docs/cssgrids/">CSS网格文档</a>。
        </p>
    </aside>


    <h2 class="content-subhead">怎么使用Pure的响应式网格？</h2>
    <p>
        Pure的响应式网格是建立在已有的网格的基础上的，它只是简单地添加了一个新的类名{{code "pure-g-r"}}，其中“r”表示响应式（responsive）。你只要简单用{{code "pure-g-r"}}替换掉{{code "pure-g"}}，所有类名为{{code "pure-u-*-*"}}的元素都会自动变成响应式的了。
    </p>


    <h2 class="content-subhead">HTML代码</h2>
    <p>
        第一个片段的代码是用Pure的普通网格写的，它们没有响应式功能，每一列的宽度总是占三分之一，宽度不会随屏幕的变化而变化。第二个片段，只是在第一个片段的基础上，把{{code "pure-g"}}替换为{{code "pure-g-r"}}，从而就使得它在小屏幕上，每一列的宽度会被破坏，扩展到占满屏幕的宽度。
    </p>

    {{#code}}
    {{> grids/compare-nr}}
    {{/code}}

    {{#code}}
    {{> grids/compare-r}}
    {{/code}}

    <h2 class="content-subhead">功能</h2>

    <ul class="content-spaced">
        <li>配置不同媒体的屏幕大小（桌面，平板，手机等）</li>
        <li>如果元素小于一个合适的宽度（默认是767px），元素的宽度占满100%</li>
        <li>调整图片以适应小屏幕</li>
        <li>可以设置任意数量的列</li>
        <li>支持可配制的前缀，方便扩展</li>
    </ul>


    <h2 class="l-centered">实际体验下</h2>
    <h3 class="l-centered">调整页面的大小，可以看到网格变形了</h3>

    {{> grids/four-col}}

    <h2 class="content-subhead">给单元格添加内边距和边框</h2>

    <p>
        给单元格添加内边距和边框有两种方法：一种是在每一个单元格里面再嵌套一个{{code "<div>"}}元素，然后直接给这个元素设置样式。
    </p>

    {{#code}}
    {{> grids/padding-nested}}
    {{/code}}

    <p>
       另一个方法是直接给每一个单元格设置样式，这有可能会破坏布局，但是你可以通过设置单元格样式为{{code "box-sizing: border-box"}}，来避免这问题： 
    </p>

    {{#code}}
    {{> grids/padding-box-sizing}}
    {{/code}}

    <p>
        使用 {{code "box-sizing: border-box"}}可以保持标记的简洁，但有两个缺点：一个是，古老的浏览器（如IE7及IE7以下）不支持{{code "box-sizing"}},另一个是，所有的单元格都设置了属性，以后就很难覆盖和取消。但这些不是问题，Pure保持{{code "box-sizing"}}的默认值为{{code "content-box"}}，这样你就可方便地覆盖或者取消了。
    </p>

    <h2 class="content-subhead">移动设备上的网格</h2>
    <p>
        使用类名{{code "pure-g"}}，而不是使用{{code "pure-g-r"}}，可以保证在小屏幕上，网格不会被破坏，如下：
    </p>

    {{> grids/mobile-col}}


      <h2 class="content-subhead">只想使用网格这一模块？</h2>
      <p>
          网格只是Pure的CSS文件中的一部分，如果你只要网格，而不需要其他模块，你可以把它分离出来，只要在{{code "<head>"}}标签里面，用{{code "<link>"}}标签引入就可以了。
      </p>

    {{#code}}
      <link rel="stylesheet" href="http://yui.yahooapis.com/pure/{{pure_version}}/grids-min.css">
    {{/code}}

      <aside>
          <p>
              此外，你也可以使用<a href="http://yui.github.io/gridbuilder/">网格生成器</a>去定制你自己的网格，然后导出CSS文件就可以了!
          </p>
      </aside>
</div>
